<template>
	<view class="review-card">
		<!-- 头部用户信息 -->
		<view class="header">
			<view class="left">
				<image
					src="https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1731059814-533000293244480.jpg"
					class="icon-80 circle mr-6"
				/>
				<view class="user-info">
					<view class="nickname">小乖吃喝玩乐记</view>
					<view class="rating">
						<image class="star" :src="imgBaseUrl + 'icon-star-yellow.png'" />
						<image class="star" :src="imgBaseUrl + 'icon-star-yellow.png'" />
						<image class="star" :src="imgBaseUrl + 'icon-star-yellow.png'" />
						<image class="star" :src="imgBaseUrl + 'icon-star-yellow-half.png'" />
					</view>
				</view>
			</view>
			<view class="date">6月10日</view>
		</view>

		<!-- 评价内容 -->
		<view class="content">
			<view class="text" :class="isFullText ? '' : 'text-3-ellipsis'">
				作为一个老武汉带娃登黄鹤楼，较大的，很多都是人文。想要纸质门票景区还是比较大的，很多都是人文景景观。想要纸质门票景区还是比较大的，很多都是人文景观。想要纸质门票必须售票窗口购买，买的电子票只有纪念票。
			</view>
			<view class="view-more" @click="handleChangeFullText" v-if="!isFullText">
				<view class="quan-wen">全文</view>
				<image :src="imgBaseUrl + 'icon-down-blue.png'"></image>
			</view>
		</view>

		<!-- 图片网格 -->
		<view class="image-grid">
			<view class="image-wrapper">
				<image :src="'https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1731059814-533000293244480.jpg'" />
			</view>
			<view class="image-wrapper">
				<image :src="'https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1731059814-533000293244480.jpg'" />
			</view>
			<view class="image-wrapper">
				<image :src="'https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1731059814-533000293244480.jpg'" />
				<view class="image-count">共6张</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from "vue"

interface Props {
	hasMore?: boolean
}

const props = withDefaults(defineProps<Props>(), {
	hasMore: false,
})

// 是否为全文展示
const isFullText = ref(false)
const handleChangeFullText = () => {
	isFullText.value = !isFullText.value
}

const imgBaseUrl = inject("imgBaseUrl")

// 最多显示3张图片
const displayImages = computed(() => {
	return props.images.slice(0, 3)
})

// 总图片数
const totalImages = computed(() => {
	return props.images.length
})
</script>
<style lang="scss" scoped>
.review-card {
	padding: 32rpx 0;
	background: #fff;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24rpx;

	.left {
		display: flex;
		align-items: flex-start;
	}

	.user-info {
		.nickname {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 8rpx;
		}

		.rating {
			display: flex;
			justify-content: flex-start;
			gap: 2rpx;

			.star {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.date {
		font-size: 28rpx;
		color: #999;
	}
}

.content {
	margin-bottom: 24rpx;
	position: relative;

	.text {
		font-size: 30rpx;
		line-height: 1.5;
		color: #333;
	}

	.view-more {
		font-size: 28rpx;
		color: #6391d5;
		margin-left: 8rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 20%);
		height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 2rpx;
		right: 0;

		.quan-wen {
			padding-left: 16rpx;
		}

		image {
			width: 16rpx;
			height: 16rpx;
			margin-left: 4rpx;
		}
	}
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16rpx;

	.image-wrapper {
		position: relative;
		aspect-ratio: 1;
		border-radius: 16rpx;
		overflow: hidden;

		&.single-image {
			grid-column: span 2;
		}

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.image-count {
			position: absolute;
			right: 12rpx;
			bottom: 12rpx;
			padding: 2rpx 10rpx;
			background: rgba(255, 255, 255, 0.7);
			color: #1d2129;
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 18rpx;
		}
	}
}
</style>
